<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            font-weight: 600;
            text-align: center;
        }
        #act{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .inline_text{
            display: flex;
            align-items: center;
            margin: 10px 0;
            width: 15%;
            justify-content: flex-end;
        }
        .inline_text span{
            flex: 1;
            text-align: center;
        }
        .inline_text input{
            padding: 7px;
            border-radius: 5px;
            transition: all .2s;
            outline: none;
            border: none;
            border: 2px solid rgb(10, 74, 170);
            width: 50%;
        }
        .inline_text input:focus{
            border-color: aqua;
        }
    </style>
</head>
<body>
    <h1>新增</h1>
    <div class="body">
        <form id="act" method="get" onsubmit="return validateForm()" >
            <div class="inline_text">
                <span>uid:</span>&nbsp;&nbsp;<input type="text">
            </div>
            <div class="inline_text">
                <span>name:</span>&nbsp;&nbsp;<input type="text">
            </div>
            <div class="inline_text">
                <span>sex:</span>&nbsp;&nbsp;<input type="text">
            </div>
            <div class="inline_text">
                <span>age:</span>&nbsp;&nbsp;<input type="text">
            </div>
            <div class="inline_text">
                <span>成绩:</span>&nbsp;&nbsp;<input type="text">
            </div>
            <div class="inline_text">
                <span>相比之差多少:</span>&nbsp;&nbsp;<input type="text">
            </div>
            <div class="inline_text">
                <span>相比之高多少:</span>&nbsp;&nbsp;<input type="text">
            </div>
            <input type="submit"></input>
        </form>
    </div>
    
</body>
</html>
<script>
    var input = document.querySelectorAll(".inline_text input")
    var channel = new BroadcastChannel('myChannel');
    
    class Sub{
        constructor(){
            this.data = {
                uid : input[0].value,
                name : input[1].value,
                sex : input[2].value,
                age : input[3].value,
                cheng: input[4].value,
                thin : input[5].value,
                tall : input[6].value
            }
            
        }
        submit() {
            var isshow = Array.from(input).every((item,index)=>item.value)
            if(isshow){
                req("/setdata","POST",this.data)
                alert("添加成功")
                return false
            }else{
                return false
            }
        }
       
    }

    function req(url,method,data){
        var xhr = new XMLHttpRequest();
        xhr.open(method, "http://127.0.0.1:3000" + url , true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                // 请求成功
                console.log(xhr.responseText);
                } else {
                // 请求出错
                console.error('Request failed: ' + xhr.statusText);
                }
            }
        };
        var postData = JSON.stringify(data)
        xhr.send(postData);
    }

    function send(){
        channel.postMessage("uniapp")
    }


    function validateForm(){
        send()
        return new Sub().submit()
    }
</script>